Ext.define('Breeze.NewMainFrame',{
	
	content:null,
	//菜单栏
	leftTreePanel:null,
	
	toolBar:null,
	
	tabPanel:null,
	
	logPanel:null,
	
	//菜单资源
	menuData:null,
	
	tabs0title:'首页',
	
	tabs0url:null,
	
	title:null,
	
	setMenuData:function(data){
		this.menuData=data;
	},
	
	setTabs0title:function(title){
		this.tabs0title=title;
	},
	
	setTabs0url:function(url){
		this.tabs0url=url;
	},
	
	setTitle:function(title){
		this.title=title;
	},
	
	constructPanels:function(){
		this.leftTreePanel=Ext.create('Ext.panel.Panel',{
			width:200,
			region:'west',
			layout:'card',
			collapsible: true,
//			collapsed:true,
//			collapseFirst:false,
//			layoutConfig: {
//				animate: true 
//			},
			split: true,
			id:'tree_menu',
			activeItem:0,
			//不显示header
			preventHeader:true,
			items:[
				{
					title:'菜单',
					tools:[{id:"left", 
								handler:Ext.bind(function(){
								this.leftTreePanel.toggleCollapse();
								},this)
							}]
						
				}
			]
		});
		
		this.logPanel=Ext.create('Ext.panel.Panel',{
			title:'日志',
			region:'south',
			height:200,
			split:true,
			collapsible: true,
			layoutConfig: {
				animate: true 
			},
			id:'log_area'
		});
	},
	
	constructTabs:function(){
		this.tabPanel=Ext.create('Ext.tab.Panel',{
			enableTabScroll:true,
			region:'center',
			activeTab:0,
			defaults:{autoScroll:true},
			items:[
				{
					title:this.tabs0title,
					autoLoad:this.tabs0url
				}
			]
		});
	},
	
	constructContent:function(){
		this.constructPanels();
		this.constructTabs();
		this.toolBar=Ext.create('Ext.toolbar.Toolbar',{
			id:'toolbar',
			height:30
		});
		this.content=Ext.create('Ext.panel.Panel',{
			title:this.title,
			tbar:this.toolBar,
			region:'center',
			layout:'border',
			items:[this.leftTreePanel,this.tabPanel,this.logPanel]
		});
	},
	
	constructViewport:function(){
		Ext.create('Ext.container.Viewport',{
			enableTabScroll:true,		
				layout:"border",		
				items:[this.content]
		});
	},
	
	constructTrees:function(data,panel){
		var store=Ext.create('Ext.data.TreeStore',{
			root:{
				expanded:true,
				children:data.children
			}
		});
		
		var treepanel=Ext.create('Ext.tree.Panel',{
			id:data.id,
			title:data.text,
			autoWidth:true,
			border : false,
			useArrows:false,
			autoScroll:true,		
			animate:true,
			lines:true,
			rootVisible:false,
			containerScroll: true,
			tools:[{
				id:'left',
				handler:function(){
					panel.toggleCollapse();
				}
			}],
			store:store
		});
		return treepanel;
	},
	
	addTabs:function(record,tabs){
		var _id=record.get('id');
		var _tab=tabs.getComponent(_id);
		
		if(_tab){
			tabs.setActiveTab(_tab);
			return;
		}
		
		tabs.add({
			id:_id,
			title:record.get('text'),
			html:'<iframe src="'+record.get('href')+'" width="100%"  frameborder="0" scrolling="auto"></iframe>',
			frame:true,
			closable:true,
			layout:'fit'
		}).show();
	},
	
	clickEvent:function(record,tabs){
		
		if(record.get('leaf') && record.get('href')){
			this.addTabs(record,tabs);
		}
	},
	
	afterConstructs:function(){
		var menu=this.menuData;
		for(var i=0;i<menu.length;i++){
			//添加toolbar
			this.toolBar.add({
				id:'click'+i,
				text:menu[i].text,
				totalnode:menu[i],
				handler:Ext.bind(function(button,e){
					var tree=this.constructTrees(button.totalnode,this.leftTreePanel);
					tree.on('itemclick',Ext.bind(function(view,record,item,index,e){
						e.stopEvent();
						this.clickEvent(record,this.tabPanel);
					},this));
					this.leftTreePanel.add(tree);
					this.leftTreePanel.getLayout().setActiveItem(button.totalnode.id);
					this.leftTreePanel.expand(true);
				},this),
			});
			this.toolBar.add('-');
		}
	},
	
	createSelf:function(){
		this.constructContent();
		this.constructViewport();
		this.afterConstructs();
	},
});
